<template>
	<view class="container">
		<view class="header-bg">

			<view class="user-info">
				<view class="left-column">
					<!-- Avatar Image with Prefix -->
					<image class="avatar" :src="$xyfun.image('/static/avatar.png')"></image>
					<view class="info" v-if="user.isLogin">
						<text class="nickname">{{ user.info.nickname }}</text>
						<text class="id">ID: {{ user.info.id }}</text>
					</view>
					<view class="info" v-else @tap="$xyfun.toLogin()">
						<text class="nickname">请登录</text>
					</view>
				</view>
				<view class="right-column">
					<view class="venue-left">
						<view class="venue-row">
							<view class="switch-wrapper">
								<text class="label">当前场馆：</text>
								<text class="switch-text" @tap="$xyfun.to('/pages/store/select')">切换</text>
								<!-- Venue Arrow Icon with Prefix -->
								<image :src="$xyfun.image('/static/user-arrow-right.png')" class="arrow-icon" />
							</view>
						</view>
						<text class="venue-name" @tap="$xyfun.to('/pages/store/store')">{{ storeInfo.name }}</text>
					</view>
				</view>
			</view>

			<view class="stats">
				<view class="stat-item">
					<text class="stat-number">{{ user.isLogin && user.info.money || 0.00 }}</text>
					<text class="stat-label">积分</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ user.isLogin && user.info.money || 0.00 }}</text>
					<text class="stat-label">余额</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ user.isLogin && user.info.money || 0.00 }}</text>
					<text class="stat-label">卡券</text>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="xy-order m-30 p-30 br-20 bc-w">
			<view class="xy-title flex">
				<view class="tb">我的订单</view>
			</view>
			<view class="order-section">
				<view v-for="(order, index) in orders" :key="index" @click="navigateTo(order.route)" class="order-item">
					<!-- Order Icons with Prefix -->
					<image :src="$xyfun.image(order.icon)" class="order-icon"></image>
					<text class="order-name">{{ order.name }}</text>
				</view>
			</view>
		</view>

		<!-- 功能服务 -->
		<view class="xy-service m-30 p-30 br-20 bc-w">
			<view class="xy-title flex">
				<view class="tb">功能服务</view>
			</view>
			<view class="xy-menu tc m-t-40 col-4">
				<view class="list flex">
					<view v-for="(service, index) in services" :key="index" @click="navigateTo(service.route)" class="item m-b-40">
						<!-- Service Icons with Prefix -->
						<image :src="$xyfun.image(service.icon)" class="service-icon"></image>
						<view class="name m-t-15 lh-30 ts-30">{{ service.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				css:{},
				storeInfo:{},
				orders: [{
						name: '全部订单',
						icon: '/static/order-1.png',
						route: '/pages/user/order/list'
					},
					{
						name: '待付款',
						icon: '/static/order-2.png',
						route: '/order'
					},
					{
						name: '已付款',
						icon: '/static/order-3.png',
						route: '/order'
					},
					{
						name: '已退订',
						icon: '/static/order-4.png',
						route: '/order'
					}
				],
				services: [{
						name: '我的钱包',
						icon: '/static/server-1.png',
						route: '/pages/user/balance/detail'
					},
					{
						name: '我的卡券',
						icon: '/static/server-2.png',
						route: '/pages/user/coupon/list'
					},
					{
						name: '充值中心',
						icon: '/static/server-3.png',
						route: '/pages/user/balance/recharge'
					},
					{
						name: '我的包场',
						icon: '/static/server-4.png',
						route: '/pages/user/package'
					},
					{
						name: '联系客服',
						icon: '/static/server-5.png',
						route: 'contact'
					},
					{
						name: '设置',
						icon: '/static/server-6.png',
						route: '/pages/user/info'
					}
				]
			};
		},
		computed: {
			...mapState(['common','user'])
		},
		onLoad() {
			this.$xyfun.setNavBg()
			this.css = this.$xyfun.css();
		},
		onShow() {
			this.loadData();
		},
		onPullDownRefresh() {
			this.loadData()
		},
		methods: {
			...mapActions('user',{'getUserInfo':'getInfo'}),
			loadData(){
				
				this.$xyfun.storeId().then((store_id)=>{
					this.$api.get({
						url: '/store/detail',
						loadingTip:'加载中...',
						data: {
							id:store_id || 1,
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.storeInfo = res;
						}
					});
					
					//刷新用户信息
					if(this.user.isLogin){
						this.getUserInfo();
					}
				})
				
			},
			// Navigation function to handle page transition
			navigateTo(route) {
				uni.navigateTo({
					url: route // Dynamic route passed from the data
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		// padding: 20rpx;
		background-color: #f5f5f5;

	}

	.xy-title {
		font-size: 32rpx;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
	}

	.user-info {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		position: relative;
		/* To position the background image */
		padding: 20rpx;
		border-radius: 10rpx;
		padding-top: 108rpx;
	}

	.header-bg {
		height: 517rpx;
		background-image: linear-gradient(to right, #fff1eb 0%, #ace0f9 100%);

	}

	.xy-order {
		position: absolute;
		top: 390rpx;
		width: 630rpx;
	}

	.xy-service {
		margin-top: 200rpx;
	}

	.bg-image {
		position: absolute;
		/* Make the image a background */
		top: 0;
		left: 0;
		width: 750rpx;
		/* Cover the entire space */
		height: 517rpx;
		/* Cover the entire space */
		object-fit: cover;
		/* Ensure the image covers the section */
		z-index: -1;
		/* Place it behind the content */
		border-radius: 10rpx;
		/* Match the border radius */
	}

	.left-column {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.right-column {
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 135rpx;
		height: 135rpx;
		border-radius: 50%;
		margin-right: 5px;
	}

	.info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 10rpx;
		height: 100rpx;
		// line-height: 100rpx;
	}

	.nickname {
		font-size: 36rpx;
		font-weight: bold;
	}

	.id {
		font-size: 28rpx;
		color: #fff;
		// width: 154rpx;
		height: 45rpx;
		background: #F8B551;
		border-radius: 10rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.venue-left {
		/* background-color: #fff; */
		/* padding: 10rpx; */
		// border-radius: 10rpx;
		/* margin-top: 10rpx; */
	}

	.venue-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.switch-wrapper {
		display: flex;
		align-items: center;

		image {
			margin-left: 5rpx;
			width: 12rpx;
			height: 23rpx;
		}
	}

	.label {
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
	}

	.switch-text {
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
	}

	.arrow-icon {
		width: 12rpx;
		height: 23rpx;
	}

	.venue-name {
		width: 218rpx;
		height: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		line-height: 100rpx;
	}

	.stats {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-number {
		// width: 50rpx;
		height: 26rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #2B1F1F;
	}

	.stat-label {
		// width: 62rpx;
		height: 30rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #2B1F1F;
		margin-top: 19rpx;
	}

	/* 我的订单样式 */
	.order-section {
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 28rpx;
		/* padding: 20rpx; */

		.order-name {
			color: #2B1F1F;
			font-size: 28rpx;
		}
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		/* padding: 10rpx; */
		/* border-bottom: 1px solid #eee; */
	}

	.order-item:last-child {
		border-bottom: none;
	}

	.order-item image {
		width: 63rpx;
		height: 63rpx;
		margin-bottom: 26rpx;
	}

	.order-item text {
		font-size: 28rpx;
		color: #333;
	}



	/* 确保每行显示 4 个 */
	.order-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.order-item {
		flex-basis: 22%;
	}

	.xy-menu {
		width: 600rpx;

		.item {
			width: 33.3%;
			text-align: center;

			button {
				background: none;
				padding: 0;
				margin: 0;
			}

			button::after {
				border: none;
			}
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.xy-menu.col-4 {
		.item {
			width: 25%;
			// margin-top:40rpx;

			image {
				width: 63rpx;
				height: 63rpx;
			}

			.name {
				margin-top: 40rpx;
			}
		}
	}
</style>